<template>
  <div class="container">
    <div class="content">
      <div class="top">
        <div class="header">
          <span class="title">{{ systemName }}</span>
        </div>
        <div class="desc">{{ desc }}</div>
      </div>
      <div class="login">
        <a-form @submit.prevent="onSubmit" :form="form">
          <a-form-item>
            <a-input
              v-decorator="[
                'phone',
                {
                  rules: [
                    {
                      pattern: /^(0|86|17951)?1[3456789]\d{9}$/,
                      required: true,
                      message: '请输入正确的手机号'
                    }
                  ]
                }
              ]"
              size="large"
              placeholder="请输入手机号"
            >
              <a-icon slot="prefix" type="phone" />
            </a-input>
          </a-form-item>
          <a-form-item>
            <div class="middle-flex">
              <a-input
                v-decorator="[
                  'code',
                  {
                    rules: [
                      {
                        pattern: /^\d{4,6}$/,
                        required: true,
                        message: '请输入正确的验证码'
                      }
                    ]
                  }
                ]"
                size="large"
                placeholder="请输入验证码"
              >
                <a-icon slot="prefix" type="block" />
              </a-input>
              <code-button
                :phone="form.getFieldsValue().phone || ''"
                style="min-width: 110px;height: 39px;margin-left: 15px;"
              />
            </div>
          </a-form-item>
          <a-form-item>
            <a-button
              :loading="logging"
              style="width: 100%;margin-top: 24px"
              size="large"
              htmlType="submit"
              type="primary"
            >登录</a-button>
          </a-form-item>
        </a-form>
        <div class="service-phone">客服热线：4000-258-717</div>
      </div>
    </div>
    <global-footer :link-list="linkList" :copyright="copyright" />
  </div>
</template>

<script>
import GlobalFooter from "../../layouts/GlobalFooter";
import MenuView from "../../layouts/MenuView.vue";
const isDev = process.env.NODE_ENV === "development";

export default {
  name: "Login",
  components: { GlobalFooter },
  data() {
    return {
      form: this.$form.createForm(this),
      logging: false
    };
  },
  computed: {
    systemName() {
      return this.$store.state.setting.systemName;
    },
    desc() {
      return this.$store.state.setting.desc;
    },
    linkList() {
      return this.$store.state.setting.footerLinks;
    },
    copyright() {
      return this.$store.state.setting.copyright;
    }
  },
  mounted() {
    if (isDev) {
      this.form.setFieldsValue({
        phone: isDev ? "18121375067" : "",
        code: isDev ? 2018 : ""
      });
    }
  },
  methods: {
    onSubmit() {
      this.form.validateFields((err, values) => {
        if (this.loading) return;
        if (!err) {
          this.logging = true;
          this.$store
            .dispatch("login", values)
            .then(() => {
              const routes = [
                {
                  path: "/",
                  name: "首页 ",
                  redirect: "幻熊科技",
                  component: MenuView,
                  children: this.$store.state.permission.addRouters
                }
              ];
              this.$router.addRoutes(routes); // 动态添加可访问路由表
              this.logging = false;
              this.$router.push({
                path: "/"
              });
            })
            .catch(() => {
              this.logging = false;
            });
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: auto;
  background: #f0f2f5 url("./bg.svg") no-repeat center 110px;
  background-size: 100%;
  .content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 32px 0;
    flex: 1;
    @media (min-width: 768px) {
      padding: 112px 0 24px;
    }
    .top {
      text-align: center;
      .header {
        height: 44px;
        line-height: 44px;
        a {
          text-decoration: none;
        }
        .logo {
          height: 44px;
          vertical-align: top;
          margin-right: 16px;
        }
        .title {
          font-size: 26px;
          color: rgba(0, 0, 0, 0.85);
          font-family: "Myriad Pro", "Helvetica Neue", Arial, Helvetica,
            sans-serif;
          font-weight: 600;
          position: relative;
          top: 2px;
        }
      }
      .desc {
        max-width: 300px;
        text-align: center;
        font-size: 14px;
        color: rgba(0, 0, 0, 0.45);
        margin: 0 auto;
        margin-top: 12px;
        margin-bottom: 50px;
      }
    }
    .service-phone {
      text-align: center;
      padding-top: 20px;
    }
    .login {
      width: 368px;
      margin: 0 auto;
      @media screen and (max-width: 576px) {
        width: 95%;
      }
      @media screen and (max-width: 320px) {
        .captcha-button {
          font-size: 14px;
        }
      }
      .icon {
        font-size: 24px;
        color: rgba(0, 0, 0, 0.2);
        margin-left: 16px;
        vertical-align: middle;
        cursor: pointer;
        transition: color 0.3s;

        &:hover {
          color: #1890ff;
        }
      }
    }
  }
}
</style>
